<template>
  <div class="stats">
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>stat</th>
          <th>value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Number of Notes</td>
          <td>{{ notesStore.totalNotesCount }}</td>
        </tr>
        <tr>
          <td>Number of character (for all of notes)</td>
          <td>{{ notesStore.totalCharactersCount }}</td>
        </tr>
      </tbody>
    </table>
    <input
      v-model="loveNoteBalls"
      v-autofocus
      class="input"
      type="text"
      placeholder="do you love noteballs??"
    />
  </div>
</template>

<script setup lang="ts">
import { useNotesStore } from '@/stores/storeNotes';
import { vAutofocus } from '@/directives/vAutofocus';
import { ref } from 'vue';
import { useWatchCharacters } from '@/use/useWatchCharacters';

const notesStore = useNotesStore();
const loveNoteBalls = ref<string>('');

useWatchCharacters(loveNoteBalls, 50);
</script>
